@import '../../../sass/scss/core.scss';

/**
 * Nav Dropdown
 * 1) On larger screens, display as dropdowns that
 *    hangs over the header
 */
.pl-c-nav__dropdown {
  @media all and (min-width: $pl-bp-med) {
    position: absolute;
    top: 100%; /* 1 */
    left: 0;
    min-width: 14rem;
    border-radius: $pl-border-radius-med;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 5px rgba($pl-color-black, 0.1);
    transition: all 0.2s ease;
    transform: translateY(-12px);
    z-index: 1;
    transition: all $pl-animate-quick ease-out;

    .pl-c-body--theme-sidebar & {
      position: relative;
    }
  }

  .pl-c-body--theme-light & {
    border-color: rgba($pl-color-black, 0.2);
  }

  .pl-c-body--theme-dark & {
    border-color: rgba($pl-color-white, 0.2);
  }

  .pl-c-body--theme-sidebar & {
    border-width: 0;
    transform: none;
    box-shadow: none;
    border-radius: 0;
  }
}
